<template>
    <view class="store-gallery">
        <!-- 店铺陈列 -->
        <view class="store-gallery-content">
            <view class="header">
                <text class="title">店铺陈列图片</text>
                <text v-if="currentType == 'edit'">{{ createTime }}</text>
            </view>
            <view class="image-grid">
                <image class="image-item" v-if="imageUrl" :src="imageUrl" mode="aspectFill" @click="previewImage" />
                <view class="image-item" @click="handleUpload" v-if="currentType == 'add'">
                    <image class="chevronright" :src="IMG_URL2 + 'peop/add.svg'"></image>
                </view>
            </view>
            <view class="button-box px-48" v-if="currentType == 'add'" :disabled="loading">
                <up-loading-icon class="loading" color="#fff" size="16" :show="loading"></up-loading-icon>
                <view class="exit-login bg2" @click="onSubmit">完成</view>
            </view>
        </view>
        <view class="button-box px-48 pb-60" style="display: flex;justify-content: center;" v-if="currentType == 'edit'" :disabled="loading">
            <up-loading-icon class="loading" color="#fff" size="16" :show="loading"></up-loading-icon>
            <view class="text" @click="onDelete">删除图片</view>
        </view>

    </view>
</template>

<script setup>
import { ref } from 'vue'
import { shopApi } from "@/api";
import { BASE_API } from "@/config";
import { IMG_URL2 } from "@/config";
const imageUrl = ref('')
let createTime = ref('')
let shopPictureId = ref('')
let currentType = ref('add')
const loading = ref(false);

function previewImage() {
    uni.previewImage({
        urls: [imageUrl.value],
        current: imageUrl.value
    })
}

function handleUpload() {
    uni.chooseImage({
        // count: 9,
        // sizeType: ['compressed'],
        // sourceType: ['album', 'camera'],
        success: async (chooseImageRes) => {
            const filePath = chooseImageRes.tempFilePaths[0];

            // 将图片转成二进制数据
            var fileData = wx.getFileSystemManager().readFileSync(filePath);


            // 将二进制数据上传到服务器
            wx.uploadFile({
                url: BASE_API + '/bg/file/upload',   // 上传的 URL 地址
                filePath: filePath,   // 文件的临时路径
                name: 'file',   // 服务器端接收文件的字段名
                header: {
                    'content-type': 'multipart/form-data'   // 设置请求头
                },
                formData: {},
                success: function (res) {
                    // 上传成功后的操作
                    console.log(JSON.parse(res.data));
                    imageUrl.value = JSON.parse(res.data).result.url
                },
                fail: function (res) {
                    // 上传失败后的操作
                    console.log(res);
                }
            });
        },
        fail: (err) => {
            uni.showToast({
                title: '选择图片失败',
                icon: 'none'
            })
        }
    });
}
const onSubmit = () => {
    loading.value = true;
    shopApi.SHOPADDSHOPPIC({ imgUrl: imageUrl.value }).then(res => {
        loading.value = false;
        if (res.code == 200) {
            uni.showToast({
                title: '新增成功',
                icon: "none"
            })
            uni.navigateBack();
        } else {
            uni.showToast({
                title: res.errMsg,
                icon: "none",
            });
        }
    })
}

const onDelete = () => {
    uni.showModal({
        title: '确认删除',
        content: '您确定要删除这张图片吗？',
        success: (res) => {
            if (res.confirm) {
                loading.value = true;
                shopApi.SHOPDELETESHOPPICBYID({ id: shopPictureId.value }).then(res => {
                    loading.value = false;
                    if (res.code == 200) {
                        uni.showToast({
                            title: res.errMsg,
                        });
                        uni.navigateBack();
                    } else {
                        uni.showToast({
                            title: res.errMsg,
                            icon: "success",
                        });
                    }
                });
            } else if (res.cancel) {
                console.log('用户取消删除');
            }
        }
    });
}
onLoad((options) => {
    uni.setNavigationBarTitle({
        title: options.item ? "编辑图片" : "上传图片"
    });
    currentType.value = options.item ? "edit" : "add"
    if (options.item) {
        imageUrl.value = JSON.parse(options.item).imgUrl
        createTime.value = JSON.parse(options.item).createTime
        shopPictureId.value = JSON.parse(options.item).shopPictureId
    }
});
</script>

<style lang="scss" scoped>
.store-gallery {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding: 30rpx 0px;
    padding-bottom: 120rpx;
    box-sizing: border-box;

    .store-gallery-content {
        background-color: #fff;
        padding: 24rpx;
        box-sizing: border-box;
    }

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30rpx;

        .title {
            font-size: 32rpx;
            color: #333;
            font-weight: bold;
        }

        .upload-btn {
            background-color: rgba(214, 142, 68, 1);
            color: #fff;
            font-size: 28rpx;
            padding: 12rpx 30rpx;
            box-sizing: border-box;
            border-radius: 30rpx;
            border: none;

            &:active {
                opacity: 0.9;
            }
        }
    }

    .image-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20rpx;

        .image-item {
            aspect-ratio: 1;
            background-color: rgba(243, 243, 243, 1);
            border-radius: 12rpx;
            overflow: hidden;
            object-fit: cover;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            .chevronright {
                width: 28px;
                height: 28px;
            }
        }
    }

    .button-box {
        width: 100%;
        position: fixed;
        bottom: 0rpx;
        left: 0;
        z-index: 9;
        background-color: #fff;
        box-sizing: border-box;
    }

    .exit-login {
        width: 654rpx;
        height: 92rpx;
        line-height: 92rpx;
        background: #D68E44;
        color: #ffffff;
        text-align: center;
        border-radius: 64px;
        font-size: 32rpx;
        margin-bottom: 40rpx;
    }

    .text {
        //styleName: Body/Medium;
        font-family: PingFang SC;
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        text-align: center;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;

        color: rgba(255, 0, 0, 1);
    }

}
</style>